<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>查提单</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #f5f5f5;
            min-height: 100vh;
        }

        .header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background-color: #222;
            color: white;
            padding: 12px 16px;
            display: flex;
            align-items: center;
            z-index: 100;
        }

        .back-arrow {
            margin-right: 16px;
            cursor: pointer;
        }

        .main-content {
            padding-top: 56px;
            padding-bottom: 80px;
        }

        .section {
            background: white;
            padding: 16px;
            margin-bottom: 8px;
        }

        .delivery-info {
            font-size: 14px;
        }

        .delivery-info .title {
            font-weight: 500;
            margin-bottom: 8px;
        }

        .delivery-info .contact {
            color: #666;
            margin: 4px 0;
        }

        .order-item {
            display: flex;
            align-items: center;
            padding: 12px 0;
        }

        .item-image {
            width: 60px;
            height: 60px;
            border-radius: 4px;
            object-fit: cover;
        }

        .item-details {
            flex: 1;
            margin-left: 12px;
        }

        .item-name {
            font-weight: 500;
        }

        .item-quantity {
            color: #666;
            font-size: 14px;
            margin-top: 4px;
        }

        .item-price {
            color: #ff4d4f;
        }

        .remarks input {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }

        .bottom-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            padding: 12px 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top: 1px solid #eee;
        }

        .total-price {
            display: flex;
            align-items: center;
        }

        .cart-icon {
            width: 24px;
            height: 24px;
            margin-right: 8px;
        }

        .price {
            color: #ff4d4f;
        }

        .pay-button {
            background: #ffc107;
            border: none;
            padding: 8px 24px;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<header class="header">
    <span class="back-arrow">←</span>
    <span>红灯笼查提单</span>
</header>

<main class="main-content">
    <div class="section delivery-info">
        <div class="title">湖南长沙</div>
        <div class="contact">胡大大先生 &nbsp;&nbsp;&nbsp;&nbsp; 联系方式：13973919441</div>
        <div class="contact">预计送达时间：***********</div>
    </div>

    <div class="section">
        <h2 style="margin-bottom: 16px;">订单明细</h2>
        <div class="order-item">
            <img src="front/image/0a3b3288-3446-4420-bbff-f263d0c02d8e.jpg" alt="毛氏红烧肉" class="item-image">
            <div class="item-details">
                <div class="item-name">毛氏红烧肉</div>
                <div class="item-quantity">x1</div>
            </div>
            <div class="item-price">68.00元</div>
        </div>
    </div>

    <div class="section remarks">
        <h2 style="margin-bottom: 12px;">备注</h2>
        <input type="text" placeholder="请输入对商家的订单备注">
    </div>
</main>

<div class="bottom-bar">
    <div class="total-price">
        <img src="front/image/cart_active.png" alt="购物车" class="cart-icon">
        <span class="price">$<%
            out.print(session.getAttribute("totalPrice"));
        %></span>
    </div>
    <button class="pay-button">去支付</button>
</div>

<script>
    document.querySelector('.back-arrow').addEventListener('click', function() {
        window.history.back();
    });

    document.querySelector('.pay-button').addEventListener('click', function() {
        // Add payment processing logic here
        alert('正在跳转到支付页面...');
        window.location.href = 'pay.jsp';
    });

    // Optional: Add input validation for remarks
    const remarksInput = document.querySelector('.remarks input');
    remarksInput.addEventListener('input', function() {
        if (this.value.length > 100) {
            this.value = this.value.slice(0, 100);
            alert('备注最多100字');
        }
    });
</script>
</body>
</html>